<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="page1" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="page2" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Board Manager Management</title>
    <link rel="stylesheet" type="text/css" href="<c:url value="/CSS/boardManager/boardManagerList.css"/>"/>
  </head>
  <body>
    <div class="container">
      <jsp:include page="/WEB-INF/JSP/head.jsp"/>
      <div class="body">
        <div class="board-manager-list">
        <form id="form" action="" method="post">
          <div class="caption">
            <div class="user-list">User:&nbsp;
              <script type="text/javascript">
                function getUserId(userId) {
                  if (userId > -1) {
                	window.location.href = "<c:url value='/boardManager/boardManagerList-" + userId + "'/>";
                  } else {
                	window.location.href = "<c:url value='/boardManager/boardManagerList'/>";
                  }
                } 
              </script>
              <select name="userId" onchange="javascript:getUserId(this.value);">
                <option value="-1">Please select</option>
                <c:if test="${userList != null}">
                  <c:forEach var="user" items="${userList}" varStatus="status">
                    <c:if test="${user.userId == userId}">
                      <option value="${user.userId}" selected="selected">${user.userName}</option>
                    </c:if>
                    <c:if test="${user.userId != userId}">
                      <option value="${user.userId}">${user.userName}</option>
                    </c:if>
                  </c:forEach>
                </c:if>
              </select>
            </div>
            <div class="title">Board Manager List - Board Manager Management</div>  
          </div>
          <div class="tr1">
            <div class="td1">Appointed</div>
            <div class="td2">Board Name</div>
          </div>
          <c:if test="${!empty pagedBoards.list}">
            <c:forEach var="board" items="${pagedBoards.list}" varStatus="status">
              <div class="tr2" id="row_${status.index}"
                onmouseover="toggleBackground('row_${status.index}', 0)"
                onmouseout="toggleBackground('row_${status.index}', 1)">
                <div class="td1">
                  <c:if test="${!empty boardManagers}">
                    <c:set var="bool" value="false"/>
                    <c:forEach var="boardManager" items="${boardManagers}">
                      <c:if test="${boardManager.board.boardId == board.boardId}">
                        <c:set var="bool" value="true"/>
                      </c:if>
                    </c:forEach>
                  </c:if>
                  <script type="text/javascript">
                    function getFields(checked, userId, boardId) {
                      if (userId > -1) {
                    	var str = checked + '-' + userId + '-' + boardId;
                        var action = "<c:url value='/boardManager/boardManagerList-" + str + "'/>";
                        $('#form').attr('action', action).submit();
                      } else {
                    	window.location.href = "<c:url value='/boardManager/boardManagerList'/>";  
                      }
                    }
                  </script>
                  <c:if test="${bool}">
                    <input type="checkbox" checked="checked" onchange="javascript:getFields(1, ${userId}, ${board.boardId})">
                  </c:if>
                  <c:if test="${!bool}">
                    <input type="checkbox" onchange="javascript:getFields(0, ${userId}, ${board.boardId})">
                  </c:if>
                  <input type="hidden" name="boardId" value="${board.boardId}"/>
                </div>
                <div class="td2">${board.boardName}</div>
              </div>
            </c:forEach>
          </c:if>
          <div id="page">
            <c:choose>
              <c:when test="${page == 'page1'}">
                <page1:PageBar pageURL="/boardManager/boardManagerList" pageAttrKey="pagedBoards"></page1:PageBar>  
              </c:when>
              <c:when test="${page == 'page2' || page == 'page3'}">
                <page2:PageBar pageURL="/boardManager/boardManagerList-${userId}" pageAttrKey="pagedBoards"></page2:PageBar>
              </c:when>
            </c:choose> 
          </div>
        </form>  
        </div>
      </div>
      <jsp:include page="/WEB-INF/JSP/foot.jsp"/>
    </div>
    <script type="text/javascript" src="<c:url value="/JS/jquery-1.7.2.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/JS/jcommon.js"/>"></script>
  </body>
</html>